<template>
    <div class="Setting">
        <div class="list">
            <div class="cell active-black" style="height: 1.6rem;" @click="setAvatar">
                <div class="title">
                    <span class="text">头像</span>
                </div>
                <div class="value">
                    <img src="../../assets/logo.png" alt="">
                </div>
            </div>
            <div class="cell active-black" @click="isShowNickName = true">
                <div class="title">
                    <span class="text">昵称</span>
                </div>
                <div class="value">
                    <span>{{nickName}}</span>
                </div>
            </div>
            <div class="cell active-black" @click="isShowAddress = true">
                <div class="title">
                    <span class="text">收货地址</span>
                </div>
                <div class="value">
                    <span>{{address.address}}</span>
                </div>
            </div>
            <div class="cell active-black" @click="isShowPaypassword = true">
                <div class="title">
                    <span class="text">支付密码</span>
                </div>
            </div>
            <div class="cell active-black" @click="$router.push('/payment-code')">
                <div class="title">
                    <span class="text">收款码</span>
                </div>
            </div>
            <div class="cell active-black" @click="$router.push('/band-usdt')">
                <div class="title">
                    <span class="text">绑定USDT钱包地址</span>
                </div>
            </div>
        </div>
<!--        设置昵称-->
        <modal v-show="isShowNickName" title="设置昵称" @close="isShowNickName = false" @sure="setNickName">
            <div class="modal-nickName" slot="content">
                <input type="text" v-model="nickName" placeholder="输入昵称">
            </div>
        </modal>
<!--        设置收货地址-->
        <modal v-show="isShowAddress" title="收货地址" @close="isShowAddress = false" @sure="setAddress">
            <div class="modal-address" slot="content">
                <div class="f-row f-j-start f-a-center"><span>姓名：</span><input v-model="address.name" type="text" placeholder="请输入姓名"></div>
                <div class="f-row f-j-start f-a-center"><span>手机号：</span><input v-model="address.phone" type="text" placeholder="请输入手机号"></div>
                <div class="f-row f-j-start f-a-center"><span>详细地址：</span><input v-model="address.address" type="text" placeholder="请输入详细地址"></div>
            </div>
        </modal>
<!--        设置支付密码-->
        <modal v-show="isShowPaypassword" title="支付密码" @close="isShowPaypassword = false" @sure="setPaypassword">
            <set-paypassword slot="content"/>
        </modal>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import {NAV_BAR_INFO} from "@/store/MutationTypes";
    import {RequestResult} from "@/common/Request";
    import Modal from "@/components/Modal.vue";
    import SetPaypassword from "../../components/SetPaypassword.vue";

    @Component({
        name: 'Setting',
        components: {SetPaypassword, Modal}
    })
    export default class extends Vue {
        // 显示设置昵称弹窗
        private isShowNickName: boolean = false;
        // 显示设置收货地址弹窗
        private isShowAddress: boolean = false;
        // 显示设置支付密码弹窗
        private isShowPaypassword: boolean = false;
        private nickName: string = '刺激战场';
        private address: any = {
            name: '区区电脑',
            phone: '15954231666',
            address: '山东省青岛市诺德广场1606'
        };
        private mounted(): void {
            let __this = this;
            this.$common.scrollToTop();
            this.$store.dispatch(NAV_BAR_INFO, {
                leftItem: {name: '返回', click: () => {
                        __this.$router.push('/user-center');
                    }}
            })
        }
        private didClick(): void {
        }

        /**
         * 设置头像
         */
        private setAvatar(): void {
            this.$request.fileUpload().then((r: RequestResult) => {
                console.log(r);
            }).catch((e: RequestResult) => {
                console.log(e);
            });
        }

        /**
         * 设置昵称
         */
        private setNickName(): void {
            this.isShowNickName = false;
            this.$common.toast({
                mes: '昵称设置成功',
                icon: 'success'
            })
        }

        /**
         * 设置地址
         */
        private setAddress(): void {
            this.isShowAddress = false;
            this.$common.toast({
                mes: '收货地址设置成功',
                icon: 'success'
            })
        }

        /**
         * 设置支付密码
         */
        private setPaypassword(): void {
            this.isShowPaypassword = false;
            this.$common.toast({
                mes: '支付密码设置成功',
                icon: 'success'
            });
            // @ts-ignore
            console.log(SetPaypassword.params);
        }
        @Watch('isShowPaypassword')
        private onIsShowPaypasswordChange(): void {
            if (!this.isShowPaypassword) {
                // @ts-ignore
                if (SetPaypassword.reset) {
                    // @ts-ignore
                    SetPaypassword.reset();
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .Setting {
        padding: 0.2rem 0.3rem;
        & .list {
            & .cell {
                width: 6.9rem;
                height: 1.0rem;
                background-color: white;
                border-radius: 0.1rem;
                margin-top: 0.2rem;
                padding: 0.3rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                position: relative;
                overflow: hidden;
                color: #666666;
                & .title {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 0.2rem;
                    & .text {
                        font-size: 0.3rem;
                    }
                }
                & .value {
                    font-size: 0.28rem;
                    color: #A6A6A6;
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: right;
                    & img {
                        width: 1.0rem;
                        height: 1.0rem;
                        border-radius: 1.0rem;
                    }
                }
            }
        }
        & .modal-nickName {
            & input {
                width: 100%;
                padding: 0.3rem 0.2rem 0.2rem 0.2rem;
                font-size: 0.28rem;
            }
        }
        & .modal-address {
            & span {
                display: inline-block;
                width: 2.0rem;
                text-align: left;
            }
            & input {
                flex: 1;
                padding: 0.3rem 0.2rem 0.2rem 0.2rem;
                font-size: 0.28rem;
            }
        }
    }
</style>
